import type { App } from "antd";

export default () => { 
    /**
     * 1. useState：常用于管理单个状态值，setState是异步的，不会立即更新，如果需要在useState后面继续使用useState的值，可以使用函数形式，适用于简单的、局部的状态管理
     * 2. useReducer：useState是常用于管理单个状态值，useReducer常用于管理复杂状态逻辑，适用于复杂状态逻辑或多相关联状态
     * 3. useSyncExternalStore：用于从外部存储获取状态并在组件中同步显示，对于需要跟踪外部状态的应用非常有用。
     *    subscribe参数中的回调函数 callback() 的核心作用就是通知 React "外部存储的数据变了，请立即更新组件"
     *    如果 getSnapshot 的值不同于上一次，React会重新渲染组件，如果getSnapshot是对象则可能会无限循环，需要自己在外层格外加个判断
     * 4. useTransition：管理 UI 中的过渡状态，特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态，这样 React 可以优先处理更重要的更新，比如用户输入，同时延迟处理过渡更新。
     *    被包裹在startTransition(() => { }) 中的部分会降低优先级，让关键的高优先级任务先执行，在渲染大量数据、进行复杂运算或处理长时间任务时特别有效。
     * 5. useDeferredValue：用于延迟某些状态的更新，直到主渲染任务完成。这对于高频更新的内容（如输入框、滚动等）非常有用，可以让 UI 更加流畅，避免由于频繁更新而导致的性能问题。
     *    useTransition主要关注点是状态的过渡。它允许开发者控制某个更新的延迟更新，还提供了过渡标识，让开发者能够添加过渡反馈。
     *    useDeferredValue主要关注点是单个值的延迟更新。它允许你把特定状态的更新标记为低优先级。
     * 6. useEffect：useEffect(setup, dependencies?) 用于处理副作用的钩子。并且useEffect 还在这里充当生命周期函数
     *    setup：Effect处理函数,可以返回一个清理函数cleanup。组件挂载时执行setup,依赖项更新时先执行cleanup再执行setup,组件卸载时执行cleanup。
     *    dependencies(可选)：setup中使用到的响应式值列表(props、state等)。必须以数组形式编写如[dep1, dep2]。不传则每次重渲染都执行Effect。
     * 7. useLayoutEffect：useLayoutEffect(setup, dependencies?) 用于在浏览器重新绘制屏幕之前触发。与 useEffect 类似。
     *    useLayoutEffect 更早执行，在 DOM 更新之后，浏览器开始重新绘制之前，而 useEffect 在浏览器完成布局和绘制之后执行副作用
     *    useLayoutEffect 是 同步执行，而 useEffect 是 异步执行
     *    useLayoutEffect 阻塞DOM渲染，而 useEffect 不阻塞DOM渲染
     *    应用场景：需要同步读取或更改DOM：例如，你需要读取元素的大小或位置并在渲染前进行调整。
     *             防止闪烁：在某些情况下，异步的useEffect可能会导致可见的布局跳动或闪烁。例如，动画的启动或某些可见的快速DOM更改。
     *             模拟生命周期方法：如果你正在将旧的类组件迁移到功能组件，并需要模拟 componentDidMount、componentDidUpdate和componentWillUnmount的同步行为。
     * 8. useRef： 当你在React中需要处理DOM元素或需要在组件渲染之间保持持久性数据时，便可以使用useRef。访问ref的值需要用.current
     *    改变 ref.current 属性时，React 不会重新渲染组件。React 不知道它何时会发生改变，因为 ref 是一个普通的 JavaScript 对象。
     *    除了 初始化 外不要在渲染期间写入或者读取 ref.current，否则会使组件行为变得不可预测。
     *    useRef只会在初始化的时候执行一次，当组件reRender的时候，useRef的值不会被重新初始化。
     *    useRef的值不能作为useEffect等其他hooks的依赖项，因为它并不是一个响应式状态。
     *    useRef不能直接获取子组件的实例，需要使用forwardRef。
     * 9. useImperativeHandle：可以在子组件内部暴露给父组件句柄，那么说人话就是，父组件可以调用子组件的方法，或者访问子组件的属性。 类似于Vue的defineExpose。
     *    useRef 在18版本 和 19版本使用方式不一样：18版本需要配合forwardRef一起使用，19版本不需要。
     *    不传入第三个参数，那么useImperativeHandle会在组件挂载时执行一次，然后状态更新时，都会执行一次
     *    传入第三个参数，并且是一个空数组，那么useImperativeHandle会在组件挂载时执行一次
     *    传入第三个参数，并且有值，那么useImperativeHandle会在组件挂载时执行一次，然后会根据依赖项的变化，决定是否重新执行
     * 10.useContext：提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。
     *    通过 React.createContext 创建一个context对象，然后需要在组件外层添加<context>,并写明要传递的数据（value={要传递的数据}）
     *    在18版本需要外层写<context.Provide>,19只需要<context>，传递的key必须为value
     *    如果使用多个context，那么需要注意，如果使用的值是相同的，那么会覆盖。
     * 11.useMemo：用于优化性能，避免在每次渲染时执行复杂的计算和对象重建。通过记忆上一次的计算结果，仅当依赖项变化时才会重新计算，提高了性能，有点类似于Vue的computed。
     *    React.memo 是一个 React API，用于优化性能（一般用于子组件）。它通过记忆上一次的渲染结果，仅当 props 发生变化时才会重新渲染, 避免重新渲染
     *        使用场景：当子组件接收的 props 不经常变化时
     *                  当组件重新渲染的开销较大时
     *                  当需要避免不必要的渲染时
     *        注意事项：不要过度使用，只在确实需要优化的组件上使用
     *                  对于简单的组件，使用 memo 的开销可能比重新渲染还大
     *                  如果 props 经常变化， memo 的效果会大打折扣
     *    useMemo：返回需要缓存的值。依赖项发生变化时，回调函数会重新执行(执行时机跟useEffect类似),用于防止函数多次调用
     *        使用场景：当需要缓存复杂计算结果时 
     *                  当需要避免不必要的重新计算时 
     *                  当计算逻辑复杂且耗时时
     *        注意事项：不要过度使用，只在确实需要优化的函数上使用
     *                  如果依赖项经常变化，useMemo 的效果会大打折扣
     *                  如果计算逻辑简单，使用 useMemo 的开销可能比重新计算还大
     * 12.useCallback:用于优化性能，返回一个记忆化的回调函数，可以减少不必要的重新渲染，也就是说它是用于缓存组件内的函数，避免函数的重复创建。
     *    在React中，函数组件的重新渲染会导致组件内的函数被重新创建，这可能会导致性能问题。useCallback 通过缓存函数，可以减少不必要的重新渲染，提高性能。
     *    useCallback的使用需要有所节制，不要盲目地对每个方法应用useCallback，这样做可能会导致不必要的性能损失。useCallback本身也需要一定的性能开销。
     *    useCallback并不是为了阻止函数的重新创建，而是通过依赖项来决定是否返回新的函数或旧的函数，从而在依赖项不变的情况下确保函数的地址不变。
     *    查看 https://juejin.cn/post/7454917013954773026 的 案例2
     * 13.useDebugValue： 是一个专为开发者调试自定义 Hook 而设计的 React Hook。它允许你在 React 开发者工具中为自定义 Hook 添加自定义的调试值。
     *    const debugValue = useDebugValue(value)
     *    value: 要在 React DevTools 中显示的值
     *    formatter?: (可选) 格式化函数
     *    作用：自定义值的显示格式
     *    调用时机：仅在 React DevTools 打开时才会调用，可以进行复杂的格式化操作
     *    参数：接收 value 作为参数
     *    返回：返回格式化后的显示值
     * 14.useId：创建一个唯一的 ID，用于标识组件。主要用于解决 SSR 场景下的 ID 不一致问题，或者需要为组件生成唯一 ID 的场景。
     *    const id = useId()
     * 
     */

    return <>
    </>
};
